<template>
  <div>
    <avue-form
      ref="form"
      v-model="form"
      :option="option"
      @tab-click="tabClick"
    >
      <template slot="inAmount" slot-scope="{}">
        <number-input
          placeholder="请输入 收入金额(可负数)"
          :initNum="form.inNum"
          @change="setInValue"
          showThousands
          showNegative
          showDecimal
          needAddZero
          :integerCount="12"
          :decimalCount="2"
        ></number-input>
      </template>
      <template slot="outAmount" slot-scope="{}">
        <number-input
          placeholder="请输入 支出金额(可正数)"
          :initNum="form.outNum"
          @change="setOutValue"
          showCapital
          showDecimal
          needAddZero
          :integerCount="16"
          :decimalCount="4"
        ></number-input>
      </template>
    </avue-form>
    <el-switch-other
      v-model="switchVal"
      :handleBeforeChange="handleBeforeChange"
      active-color="#13ce66"
      inactive-color="#ff4949"
    >
    </el-switch-other>
  </div>
</template>

<script>
export default {
  name: 'TestAvueForm',
  data() {
    return {
      form: {
        inNum: null,
        outNum: null
      },
      option: {
        labelWidth: 120,
        group: [
          {
            label: '基本信息',
            column: [
              {
                label: '所属组织',
                prop: 'intraCorpCode',
                type: 'tree',
                span: 6,
                rules: [
                  {
                    required: true,
                    trigger: 'change',
                    message: '请选择所属组织'
                  }
                ],
                dicData: [
                  {
                    label: '组织一',
                    value: '1'
                  },
                  {
                    label: '组织二',
                    value: '2'
                  }
                ]
              },
              {
                label: '组织编码',
                prop: 'orgCode',
                span: 6,
                rules: [
                  {
                    required: true,
                    trigger: 'change',
                    message: '请输入组织编码'
                  }
                ]
              },
              {
                label: '组织名称',
                prop: 'orgName',
                span: 6,
                rules: [
                  {
                    required: true,
                    trigger: 'change',
                    message: '请输入组织名称'
                  }
                ]
              },
              {
                label: '账户类型',
                prop: 'accountType',
                type: 'select',
                span: 6,
                rules: [
                  {
                    required: true,
                    trigger: 'change',
                    message: '请选择账户类型'
                  }
                ],
                dicData: [
                  {
                    label: '账户类型一',
                    value: '1'
                  },
                  {
                    label: '账户类型二',
                    value: '2'
                  }
                ]
              },
              {
                label: '收入金额',
                prop: 'inAmount',
                span: 24,
                rules: [
                  {
                    required: true,
                    trigger: 'change',
                    message: '请输入收入金额'
                  }
                ]
              },
              {
                label: '支出金额',
                prop: 'outAmount',
                span: 24,
                rules: [
                  {
                    required: true,
                    trigger: 'change',
                    message: '请输入支出金额'
                  }
                ]
              }
            ]
          }
        ]
      },
      switchVal: false
    };
  },
  mounted() {},
  methods: {
    tabClick(activeNames) {
      console.log('%c tabClick===>', 'color: lime;', activeNames);
    },
    setInValue(val) {
      // console.log("%c setInValue==>", "color: lime;", val);
      this.form.inAmount = val;
    },
    setOutValue(val) {
      // console.log("%c setOutValue==>", "color: lime;", val);
      this.form.outAmount = val;
    },
    handleBeforeChange(val) {
      let tip = val ? '关闭' : '开启';
      return new Promise((resolve) => {
        this.$confirm(`确认是否${tip}？`, {
          title: '请确认',
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        })
          .then(() => {
            resolve(true);
          })
          .catch(() => {
            resolve(false);
          });
      });
    }
  }
};
</script>

<style lang="scss" scoped></style>
